<template>
    <div class="personItem">
        <div v-for="item in formList" :key="item.id">
            <!-- 选择框 -->
            <div v-if="item.type === 'select'">
                <van-field readonly clickable :name="item.name" v-model="form.model.submitData[item.id]" :value="value"
                    :label="item.name" :placeholder="`Please select ${item.name}`" @click="doClick(item)"
                    :rules="[{ required: true, message: 'The information cannot be empty' }]" />
                <van-popup v-model="showPicker" position="bottom">
                    <van-picker show-toolbar :columns="columns" @confirm="Confirm" confirm-button-text="Confirm"
                        cancel-button-text="Cancel" @cancel="showPicker = false" />
                </van-popup>
            </div>
            <!-- 数字 -->
            <div v-else-if="item.type === 'number'">
                <van-field :rules="[{ required: true, message: 'The information cannot be empty' }]"
                    v-model.number="form.model.submitData[item.id]" name="Postal code" label="Postal code"
                    placeholder="Please enter postal code" />
            </div>
            <!-- 省市区 -->
            <div v-else-if="item.type === 'addressType'">
                <van-field :rules="[{ required: true, message: 'The information cannot be empty' }]"
                    v-model="address.fieldValue" is-link readonly label="Address"
                    placeholder="Please select a province or city" @click="address.show = true" />
                <van-popup v-model="address.show" round position="bottom">
                    <van-cascader v-model="address.cascader" title="Address" :options="address.list"
                        placeholder="Please select" @close="address.show = false" @finish="addressFinish"
                        :field-names="{ text: 'name', value: 'id' }" @change="addressChange" />
                </van-popup>
            </div>
            <!-- 邮箱 -->
            <div v-else-if="item.id === 'email'">
                <van-field :rules="[{
                    required: true, message: 'The information cannot be empty',
                    pattern: /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/, message: 'Mailbox format error'
                },]" v-model="form.model.submitData[item.id]" name="Email" label="Email"
                    placeholder="Please enter the Email" />
            </div>
            <!-- 详细地址 -->
            <div v-else-if="item.id === 'address.detailAddress'">
                <van-field :rules="[{ required: true, message: 'The information cannot be empty' }]"
                    v-model="form.model.submitData.address.detailAddress" name="Address Details" label="Address Details"
                    placeholder="Please enter the detailed address" />
            </div>
        </div>

    </div>
</template>
<script>
import { jiami, jiemi } from "../../utils/aeskey.js";
import { getAddressAPI } from '../../api'
export default {
    props: ['formList', 'formId'],
    data() {
        return {
            // 省市区数据
            address: {
                show: false,
                cascader: '',
                list: [],
                fieldValue: ''
            },
            form: {
                model: {
                    formId: '',
                    submitData: {
                        education: '',
                        sex: '',
                        marital: '',
                        childrenCount: '',
                        postalCode: '',
                        residence: '',
                        address: {
                            bigAddress: {
                                province: '',
                                city: ''
                            },
                            detailAddress: ''
                        },
                        email: ''
                    }
                }
            },
            value: '',
            showPicker: false,
            columns: [],
            i: [],//当前选中的数组
        }
    },
    methods: {
        //点击文本框触发
        doClick(item) {
            this.showPicker = true
            this.columns = item.options.map(item => item.id)
            console.log(this.columns)
            this.i = item
            console.log(this.i, 'i')
        },
        //点击确认按钮之后
        Confirm(value, index) {
            this.showPicker = false
            console.log(this.i, '------')
            this.form.model.submitData[this.i.id] = value
        },
        //当省市区变化的时候
        async addressChange({ value, selectedOptions, tabIndex }) {
            const r = {
                model: value
            }
            const res = await getAddressAPI(jiami(r))
            console.log('市', jiemi(res.data))
            console.log('value, selectedOptions, tabIndex', value, selectedOptions, tabIndex)
            selectedOptions.forEach(item => {
                if (item.id === value) {
                    item.children = jiemi(res.data).model
                }
            })
        },
        //当地址选择完毕时
        async addressFinish({ selectedOptions }) {
            selectedOptions.forEach(item => {
                if (item.children) {
                    this.address.show = false
                }
            })
            this.address.fieldValue = selectedOptions.map((option) => option.name).join('/');
            console.log(selectedOptions, 'selectedOptions')
            try {
                this.form.model.submitData.address.bigAddress.province = selectedOptions[0].id || ''
                this.form.model.submitData.address.bigAddress.city = selectedOptions[1].id || ''
                console.log()
            } catch (error) {
                console.log(error)
            }
        },
        //获取地址信息
        async getaddress() {
            const r = {
                model: ''
            }
            const res = await getAddressAPI(jiami(r))
            jiemi(res.data).model.forEach(item => {
                this.address.list.push({
                    id: item.id,
                    name: item.name,
                    children: item.children || null
                })
            })
            console.log(this.address.list, '省')
            console.log('地址信息', jiemi(res.data))
        },
    },
    created() {
        this.form.model.formId = this.formId
        this.getaddress()
    }
}
</script>